<template>
<div id="order-detail" class="bg-assist">
	<sub-page-header title="我的订单" :triggerBack="true" @back="$router.push('/me/orders')">
		<div class="dropdown-box" slot="right">
			<i @click="showDropdown = !showDropdown" class="iconfont icon-diandian"></i>
			<ul v-show="showDropdown" class="dropdown">
				<div class="arrow-up"></div>
				<router-link to="/" tag="li"><i class="iconfont icon-home"></i>首页</router-link>
				<router-link to="/good-categories" tag="li"><i class="iconfont icon-category"></i>分类</router-link>
				<router-link to="/cart" tag="li"><i class="iconfont icon-cart"></i>购物车</router-link>
				<router-link to="/me" tag="li"><i class="iconfont icon-user"></i>我的</router-link>
			</ul>
		</div>
	</sub-page-header>
	<div class="status-box">
		<p>订单状态:</p>
		<h3>{{order.status_text}}</h3>
	</div>
	<div v-if="order.type == 0" class="address">
		<dl>
			<dt><i class="iconfont icon-position"></i></dt>
			<dd>
				<p>收货人: {{order.address ? order.address.accept_name : '未设置'}}</p>
				<p>收货地址: {{order.address ? order.address.address : '未设置'}}</p>
			</dd>
		</dl>
	</div>

	<div class="order-goods">
		<div v-for="item in order.item" class="goods clearfix" :key="item.id">
			<img :src="item.product.thumbnail" alt="">
			<div class="info">
				<p>{{item.product.title}}</p>
				<p class="bottom">
					<span class="text-price">£{{item.item.price}}</span>
					<span class="pull-right">x{{item.qty}}</span>
				</p>
			</div>
		</div>
	</div>

	<div class="order-info">
		<div class="title">基本信息</div>
		<ul>
			<li>
				<span class="left">订单编号</span>
				<span class="right">{{order.order_id}}</span>
			</li>
			<li>
				<span class="left">下单时间</span>
				<span class="right">{{order.create_time}}</span>
			</li>
			<li>
				<span class="left">优惠</span>
				<span class="right">{{order.cut_fee}}</span>
			</li>
		</ul>
	</div>

	<div class="order-info">
		<div class="title">价格信息</div>
		<ul>
			<li>
				<span class="left">订单总金额</span>
				<span class="right">{{order.total}}</span>
			</li>
			<li>
				<span class="left">优惠金额</span>
				<span class="right">{{order.cut_fee}}</span>
			</li>
			<li>
				<span class="left">运费</span>
				<span class="right">{{order.shipping_fee}}</span>
			</li>
			<li v-if="order.status > 1 && order.status < 8">
				<span class="left">支付方式</span>
				<span class="right">{{formatPayMode(order.pay_mode)}}</span>
			</li>
		</ul>
	</div>

	<div class="footer clearfix">
		<div class="pull-right">
			<button @click="cancel" v-if="order.status == 0" class="btn btn-primary">取消订单</button>
			<button @click="pay" v-if="order.status == 0" class="btn btn-normal">付款</button>
			<button @click="confirm" v-if="order.status == 2" class="btn btn-normal">确认收货</button>
			<button @click="evaluateShow = true" v-if="order.status == 3 && order.comment == 0" class="btn btn-normal">立即评价</button>
			<button v-if="order.status == 8 || order.status == 9" @click="handleDeleteOrder" class="btn btn-normal">删除订单</button>
			<button v-if="order.status > 0 && order.status != 10 && (new Date(order.create_time))+ 86400 * 7 * 1000 < Date.now()" class="btn btn-normal" @click="handleRefundOrder">退货</button>
		</div>
	</div>

	<!-- 评价弹框 -->
	<el-dialog 
	title="评价"
	:visible.sync="evaluateShow"
	size="large"
	class="evaluate"
	>
		<span>为本次购物体验打分</span>
		<el-rate
		    v-model="evaluate.star"
		    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
		    class="evaluate-rate" show-text>
		  </el-rate>

		<el-input type="textarea" v-model="evaluate.content" placeholder="说点什么" :rows="5" />

		<span class="img-title">晒图</span>
		<el-upload
			list-type="picture-card"
			action="/api/upload"
			name="user_file"
			:on-success="handleUploadSuccess"
			:on-remove="handleUploadRemove"
		>
			<i class="el-icon-plus"></i>
		</el-upload>

		<span slot="footer" class="dialog-footer">
		    <el-button @click="evaluateShow = false">取 消</el-button>
		    <el-button type="primary" @click="handleEvaluate">确 定</el-button>
		</span>
	</el-dialog>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			evaluateShow: false,
			showDropdown: false, // 显示下拉开关
			order: {
				address: {}
			},
			evaluate: {
				star: '',
				content: '',
				images: [
					
				]
			}
		}
	},
	created () {
		let vue = this;
		let id = this.$route.params.id;
		api.get('/order/detail/'+id)
		.then(function (response) {
			vue.order = response.data.order;
		})
		.catch(function (error) {
			vue.$message.error('加载失败');
		});
	},
	methods: {
		formatPayMode (val) {
			switch (parseInt(val)) {
				case 0:
					return '余额支付';
				case 1:
					return '微信支付';
				case 2:
					return '支付宝支付';
				case 3:
					return '积分支付';
				case 4:
					return 'paypal支付';
			}
		},
		cancel () {
			var vue = this;
			api.get('/order/cancel/'+vue.order.id)
			.then(function (response) {
				vue.$message.success('取消成功');
				vue.order.status = 8;
			})
			.catch(function (error) {
				vue.$message.error(error.err);
			});
		},
		pay () {
			this.$router.push('/order/pay/'+this.order.id);
		},
		confirm () {
			var vue = this;
			api.get('/order/confirm/'+this.order.id)
			.then(function (response) {
				vue.$message.success('确认收货成功');
				vue.order.status = 3;
			})
			.catch(function (error) {
				vue.$message.error(error.err);
			})
		},
		handleEvaluate () {
			if (!this.evaluate.star) {
				return this.$message.warning('请选择分数');
			}
			if (!this.evaluate.content) {
				return this.$message.warning('请输入内容');
			}
			var images = '';
			for(var k in this.evaluate.images) {
				images += this.evaluate.images[k].path+',';
			}
			images = images.substr(0, images.length-1);
			this.evaluate.images = images;

			api.post('/order/evaluate/'+this.order.id, this.evaluate)
			.then(response => {
				this.$message.success('评价成功');
				this.evaluateShow = false;
				this.order.comment = 1;
			})
		},
		handleUploadSuccess (response, file, fileList) {
			this.evaluate.images.push({
				path: response.path,
				name: file.name
			});
		},
		handleUploadRemove (file, fileList) {
			this.evaluate.images.forEach((item,index) => {
				if (item.name == file.name) {
					this.evaluate.images.splice(index, 1);
				}
			})			
		},
		handleDeleteOrder () {
			api.post('/order/delete/'+this.order.id)
			.then(response => {
				this.$message.success('删除成功');
				this.$router.back();
			});
		},
		handleRefundOrder () {
			api.post('/order/refund/'+this.order.id)
			.then(response => {
				this.order.status = 10;
				this.$message.success('已提交申请，我们会尽快为您处理');
			})
			.catch(error => {
				if (error.response.data.error) {
					this.$message.error(error.response.data.error);
				} else {
					this.$message.error('网络错误');
				}
			});
		}
	}
}
</script>

<style scoped>
.dropdown-box {
	position: relative;
}
.dropdown {
	left: auto;
	right: -8px;
    min-width: 100px;
    background-color: #000;
    opacity: 0.9;
}

.dropdown .arrow-up {
	position: absolute;	
	top: -10px;
	right: 15px;
}

.dropdown li {
	color: #fff;
	text-align: center;
}

.status-box {
	background: -webkit-linear-gradient(left, #c8182b , #d54025);
    background: -o-linear-gradient(right, #c8182b, #d54025);
    background: -moz-linear-gradient(right, #c8182b, #d54025);
    background: linear-gradient(to right, #c8182b , #d54025);
    color: #fff;
    padding: 20px;
}

.address {
	background-color: #fff;
	padding: 10px;
}

.address dl dt {
	float: left;
	margin-top: 15px;
}

.address dl dd {
	padding-left: 20px;
}

.order-goods {
	margin-top: 10px;
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
	overflow: hidden;	
	background-color: #fff;
}

.order-goods .goods {
	margin-bottom: 5px;
}

.order-goods .goods img {
	width: 84px;
	height: 84px;
	float: left;
}

.order-goods .goods .info {
	padding-left: 94px;
}

.order-info {
	background-color: #fff;
	margin-top: 10px;
}

.order-info .title {
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
}

.order-info > ul li {
	padding: 10px;
}

.order-info > ul li > .left {
	text-align: left;
}

.order-info > ul li > .right {
	text-align: right;
	float: right;
}

.footer {
	padding: 10px;
	margin-top: 10px;
	background-color: #fff;
}

.evaluate-rate {
	margin-top: 10px;
	margin-bottom: 20px;
}

.img-title {
	display: block;
	margin: 10px 0px;
}

</style>

<style>
.evaluate .el-upload--picture-card {
	width: 100px;
	height: 100px;
	line-height: 100px;
}

.evaluate .el-upload-list--picture-card .el-upload-list__item{
	width: 100px;
	height: 100px;
}
</style>